<template>
  <div id="app" style="height: 100%">
<!--    <img alt="Vue logo" src="./assets/logo.png">-->
<!--    <HelloWorld />-->
    <div style="width: 100%;height: 100%;margin: 0 auto;padding: 10px;box-sizing: border-box;">
      <vue-draggable-area
          ref="area"
          v-if="show"
          :data="list"
          :can-edit="canEdit"
          :model="model"
          :grid-bg="gridBg"
          :help-line="helpLine"
          :help-line-style="helpLineStyle"
          @modelChange="modelChange"
          @close="close"
          @dragstop="dragstop"
          @resizestop="resizestop"
          @fullscreen="fullscreen"
          @resizescreen="resizescreen"
      >
        <button @click="getValue('area')">获取结果</button>
        <button @click="setItem('area')">存储session</button>
        <button @click="getItem('area')">获取session</button>
        <button @click="toggleModule(false)" v-show="model">切换到自由模式</button>
        <button @click="toggleModule(true)" v-show="!model">切换到组件对调模式</button>
        <button @click="toggleEditing">切换编辑状态: {{ canEdit ? '可编辑' : '已禁用' }}</button>
        <button @click="toggleHelpLine">是否显示辅助线: {{ helpLine ? '显示' : '不显示' }}</button>

      </vue-draggable-area>
    </div>

  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'


export default {
  name: 'App',
  components: {
    HelloWorld,
  },
  data(){
    return {
      data:[
        {
          id: '1',
          component: 'left',
          title: '我的拖拽组件left',
          width: 0.2,
          height: 0.5,
          x: 0,
          y: 0.1,
          headerBg: '#909399',
          headerColor: '#ffffff',
          exchangeBorder: '2px solid #e6a23c',
          showHeader: false,
          parent: true,
          zIndex: 20,
          params: {value: '这是专递的参数'}
        },
        {
          id: '2',
          component: 'right',
          title: '我的拖拽组件right',
          width: 0.3,
          height: 0.5,
          x: 0.2,
          y: 0.2,
          headerBg: '#67c23a',
          headerColor: '#000000',
          exchangeBorder: '3px dotted #000000',
          zIndex: 10,
          showHeader: false,
        },
        {
          id: '3',
          component: 'center',
          title: '我的拖拽组件',
          width: 0.2,
          height: 0.5,
          x: 0.5,
          y: 0.1,
          headerBg: '#20a0ff',
          headerColor: '#ffffff',
          exchangeBorder: '2px dashed red',
          zIndex: 30,
        },
        {
          id: '4',
          component: 'HelloWorld',
          title: 'HelloWorld',
          width: 0.2,
          height: 0.5,
          x: 0.7,
          y: 0.2,
          headerBg: '#20a0ff',
          headerColor: '#ffffff',
          zIndex: 5,
          exchangeBorder: '2px dashed red'
        }
      ], //模拟远程数据
      show: false,
      list: [],
      canEdit: false,//是否可编辑
      model: true,//模式,
      gridBg: ["rgba(255,255,255,0.2)",30, "rgba(36,41,46,1)"],//网格样式 0网格线条色 1线条宽高间隙 2背景色
      helpLine: true,//是否显示辅助线
      helpLineStyle: ['1px','red'],

    }
  },
  mounted() {
    const  session = this.getItem('area')
    if(session&&session.data){
      this.list = session.data;
      this.canEdit = session.canEdit;
      this.model = session.model;
      this.gridBg = session.gridBg;
      this.helpLine = session.helpLine;
      this.helpLineStyle = session.helpLineStyle;
    }else{
      this.list = this.data;
    }
    this.show = true;


  },
  methods:{
    getValue(el){
      const value = this.$refs[el].getValue();
      console.log(value)
      return value;
    },
    setItem(name){
      sessionStorage.setItem(name,JSON.stringify(this.$refs['area'].getValue()))
    },
    getItem(name){
      return  JSON.parse(sessionStorage.getItem(name))
    },
    toggleModule(type){
      this.$refs.area.toggleModule(type);
    },
    toggleEditing(){
      this.canEdit = !this.canEdit;
    },
    modelChange(type){
      this.model = type;
    },
    toggleHelpLine(){
      this.helpLine = !this.helpLine;
    },
    dragstop(id,data,type){
      const item = data.data.find(item=>item.id===id)

      console.log(this.$refs.area.getItemEl())
      console.log(this.$refs.area.getItemEl(item,'child'))

      if(type){
        console.log('这是交换模式',type)
      }else{
        console.log('这是普通模式')
      }
    },
    resizestop(id,data){
      console.log(id,data)
    },
    close(id,data){
      console.log(id,data)
    },
    fullscreen(id){
      console.log(id,'全屏了')
    },
    resizescreen(id){
      console.log(id,'恢复原始窗口了')
      console.log(this.$refs.area)
    }
  }
}
</script>

<style>
#app {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

</style>
